
<form>

  <h3 mat-dialog-title>Add a new field</h3>

  <div mat-dialog-content>

    <mat-form-field class="w-100">
      <span
        matPrefix
        matTooltip="Name of field"
        class="d-flex flex-nowrap align-items-center justify-content-between me-2">
        <mat-icon>list</mat-icon>
        <span class="text-muted">|</span>
      </span>
      <input
        matInput
        placeholder="Name"
        #type
        autocomplete="off">
    </mat-form-field>

    <mat-form-field class="w-100">
      <span
        matPrefix
        matTooltip="Value of field"
        class="d-flex flex-nowrap align-items-center justify-content-between me-2">
        <mat-icon>edit</mat-icon>
        <span class="text-muted">|</span>
      </span>
      <input
        matInput
        placeholder="Value"
        #value
        autocomplete="off">
    </mat-form-field>

  </div>

  <div
    mat-dialog-actions
    [align]="'end'">

    <button
      mat-dialog-close
      mat-button
      color="primary"
      class="px-sm-5 px-4"
      type="button">
      Close
    </button>

    <button
      mat-flat-button
      color="primary"
      class="px-sm-5 px-4"
      (click)="save(type.value, value.value)"
      type="submit">
      Save
    </button>

  </div>

</form>